import * as React from "react";
import ThreeJsView from './utils/ThreeJsView';
// import ThreeJsViewFunc from './utils/ThreeJsViewFunc';
import { IEdge, IFace, IVertex } from './utils/types';
import NestedTreeMenu from "./NestedTreeMenu/index"
import NestedTreeMenuOld from "./NestedTreeMenu/indexold"
import axios from 'axios';
import {  IModelInfo,  IData,
  DispersedResult
} from './types/typing';
type CounterProps = {
    name: string;
  };
  
  type CounterState = {
    value: number;
    representation: number;
    coneResolution: number;
    // thisPointRenderer:any;
    // fullScreenRenderer: vtkFullScreenRenderWindow;
  };
  class AppThree extends React.Component<CounterProps, CounterState> {
    state: CounterState = {
        value: 0,
        representation: 2,
        coneResolution: 6,
        // fullScreenRenderer: vtkFullScreenRenderWindow.newInstance(),
        // thisPointRenderer:null,
      };
      componentDidMount() {
       
          this.initViewData();
    
      }
      initViewData=async()=> {
       
        // let url = '/resource/vtk/res_9.vtu';
        const modelPath="/three/json/teapot-claraio.json"
        axios.get(modelPath,{ responseType: 'json'}).then(async (result:any)=>{
          // const result: DispersedResult =res ;
          debugger
          await this.initView(result.data);
        })
      
      }
      initView=async (result: DispersedResult)=> {
        const viewContainer = document.querySelector('#view') as HTMLElement;
        debugger
        const threeJsView = new ThreeJsView({ viewContainer  });
        // const threeJsView = new ThreeJsViewFunc(viewContainer);
        let faceLists: IFace[] = [];
        let edgeLists: IEdge[] = [];
        let vertexLists: IVertex[] = [];
        const forEach = (list: IModelInfo[]) => {
          for (const obj of list) {
            if (obj.data) {
              const item :IData= obj.data[0]  ;
              item.faceLists = item.faceLists || [];
              item.edgeLists = item.edgeLists || [];
              item.vertexLists = item.vertexLists || [];
  
              faceLists = [...faceLists, ...item.faceLists];
              edgeLists = [...edgeLists, ...item.edgeLists];
              vertexLists = [...vertexLists, ...item.vertexLists];
            }
            if(obj.children){
                forEach(obj.children)
            }
          }
        };
        forEach(result.objects)
       
        threeJsView.combineAndRenderShapes([
          [faceLists , edgeLists  , vertexLists  ],{}
        ])
      }
      render() {
        // const { name } = this.props;
        // const { value } = this.state;
    
        return (
          <div>
                <NestedTreeMenu />
            <div
              id="view"
              //  ref={ this.vtkContainerRef  }
            >
              
              <table
                style={{
                  display:"none",
                  position: "absolute",
                  zIndex: 20,
                  top: "25px",
                  left: "25px",
                  background: "white",
                  padding: "12px",
                }}
              >
                <tbody>
                  <tr>
                    <td>
                      <select
                        value={this.state.representation}
                        style={{ width: "80%" }}
                        // onInput={(ev) =>
                        //   setRepresentation(Number(ev.currentTarget.value))
                        // }
                      >
                        <option value="0">Points</option>
                        <option value="1">Wireframe</option>
                        <option value="2">Surface</option>
                      </select>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input
                        type="range"
                        min="4"
                        max="80"
                        value={this.state.coneResolution}
                        // onChange={(ev) => setConeResolution(Number(ev.target.value))}
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
          
            </div>
          </div>
        );
      }
  }
  export default AppThree;